import {Utils} from '../common.js'
import UniqueArray from '../unique-array.js';
import {WidgetEventDispatcher} from './base-widget.js'
import {WIDGET_DISPLAY_MODE, WIDGET_MENU_CONFIG, WIDGET_ICON_SIZE} from './widget-const.js';

/**
 * 1) hold all widget instances;
 * 2) handle widget HTMLElement relative logics;
 */
export default class WidgetManager {
    constructor(container, dispatcher) {
        this._dispatcher = dispatcher;
        this._layoutElem = Utils.QuerySelector(container);
        this._uArrWidget = new UniqueArray('SUID');
        this._lastActivedWidget = undefined;
        this._SUID = undefined;

        this._layoutElem.addEventListener('click', (e) => {
            const _target = e.target;
            if (_target.hasAttribute('data-slog-menu-item')) {
                const _SUID = _target.parentElement.parentElement.id;
                const _widget = this._uArrWidget.GetByKey(_SUID);
                switch (parseInt(_target.dataset.slogMenuItem)) {
                    case WIDGET_MENU_CONFIG.TOGGLE:
                        if (_widget.SwitchMode()) {
                            this._HandleWidgetMode(_widget);
                        }
                        break;
                    case WIDGET_MENU_CONFIG.CREATE:
                        this._dispatcher.DispatchEvent(WidgetEventDispatcher.Event.EVT_WIDGET_BEFORE_CREATE, _widget);
                        break;
                }
            }
        });
    }

    _HandleWidgetMode(widget) {
        switch (widget.mode) {
            case WIDGET_DISPLAY_MODE.EDIT:
                if (this._lastActivedWidget != widget) {
                    if (this._lastActivedWidget) {
                        this._lastActivedWidget.SetMode(WIDGET_DISPLAY_MODE.VIEW);
                        this._lastActivedWidget = undefined;
                    }
                }
                this._lastActivedWidget = widget;
                break;
            case WIDGET_DISPLAY_MODE.VIEW:
                if (this._lastActivedWidget == widget) {
                    this._lastActivedWidget = undefined;
                }
                this._lastActivedWidget = widget;
                break;
            case WIDGET_DISPLAY_MODE.UNKNOWN:
            default:
                break;
            //ToastMessager.Show(`Can NOT insert widget which has mode of 'UNKNOWN' into widget manager.`, MessagerLevel.ERROR);
            //return false;
        }
        return true;
    }

    GetWidget(WSUID) {
        return this._uArrWidget.GetByKey(WSUID);
    }
    MoveHigher(WSUID) {
        let _widget = this._uArrWidget.GetByKey(WSUID);
        if (_widget) {
            const _idx = this._uArrWidget.MoveHigher(_widget);
            if (_idx >= 0) {
                let _w2 = this._uArrWidget.GetByIndex(_idx + 1);
                _w2.layoutElem.before(_widget.layoutElem);
                return true;
            }
        }
        return false;
    }
    MoveLower(WSUID) {
        let _widget = this._uArrWidget.GetByKey(WSUID);
        if (_widget) {
            const _idx = this._uArrWidget.MoveLower(_widget);
            if (_idx > 0) {
                let _w2 = this._uArrWidget.GetByIndex(_idx - 1);
                _w2.layoutElem.after(_widget.layoutElem);
                return true;
            }
        }
        return false;
    }
    InsertToPosition(widget, existWidget, position = 1) {
        if (this.count <= 0) {
            this._layoutElem.replaceChildren();
        }

        if (existWidget) {
            if (this._uArrWidget.InsertToPosition(widget, existWidget, position)) {
                existWidget.layoutElem.insertAdjacentElement(position < 0 ? "beforebegin" : "afterend", widget.layoutElem);
                this._HandleWidgetMode(widget);
            }
        } else {
            if (this._uArrWidget.Insert(widget, position)) {
                this._layoutElem.insertAdjacentElement(position < 0 ? "afterbegin" : "beforeend", widget._layoutElem);
                this._HandleWidgetMode(widget);
            }
        }
        return this._uArrWidget.GetIndex(widget);
    }
    Remove(widget) {
        if (this._uArrWidget.Erase(widget)) {
            widget.layoutElem.remove();
            return true;
        }
        return false;
    }
    Reinit(SUID) {
        this._SUID = SUID;
        this._uArrWidget.ForEach((_w) => {
            _w.layoutElem.remove();
            _w.Deinit();
            return false;
        }, this);
        this._uArrWidget.Clear();
        this._lastActivedWidget = undefined;
    }
    get count() {
        return this._uArrWidget.length;
    }
}

/// init;
(function () {
    document.head.append(Utils.CreateCSSElement(`
section{
    position:relative;
    width:100%;
    padding: 1em ${WIDGET_ICON_SIZE * 1.5}px 1em ${WIDGET_ICON_SIZE * 0.5}px;
}
.slog_section_left{
    height:100%;
    width: ${WIDGET_ICON_SIZE * 2}px;
}
.slog_section_right{
    height:100%;
    width: calc(100% - ${WIDGET_ICON_SIZE * 2}px - 8px);
    position: relative;
}
.slog_full_percent{
    height:100%;
    width:100%;
}
.slog_half_width{
    width:50%;
    min-width:50%;
    max-width:50%;
}
.slog_full_width{
    width:100%;
    min-width:100%;
    max-width:100%;
}
.slog-editor{
    border:none;
    outline:none;
    background-color:ivory;
    padding:4px;
}
.slog-editor:empty:before{
    content: attr(placeholder);
    color:darkgrey;
}
.slog-editor:focus:before{
    content:none;
}
.slog_menu_a{
    color:#c6c6c6;
    cursor: pointer;
}
.slog_menu_a:hover{
    color:#c6c6c6;
}
section img{
    max-width:100%;
}
section table{
    max-width:100%;
}
section p,
section pre,
section table,
section figure,
section figcaption,
.blockquote-footer
{
    margin:0 0 0 0;
}
.slog_border{
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f5f5f5;
}
.slog_border_right{
    border-right:1px dashed;
    border-color:blue;
}
div[data-language]::before {
    content: attr(data-language);
    color: black;
    background-color: #CFCFCF;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.6em;
    border-radius: 0 0 0 5px;
    padding: 0 0.7em;
    text-shadow: none;
}
.widget_editable_tag{
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f5f5f5;
}
blockquote {
  background: #f9f9f9;
  border-left: 4px solid #ccc;
  padding: 0.5em 10px;
}
border-with-dash {
    border: 2px dashed;
    border-color: #c71717;
}
`));
    console.log("[slog] widget inited.");
})();

